<template>
    <app-frame :pad="pad" :menus="menus" :title="title" :mainTitle="mainTitle">
        <template #logo>
            <img :src="logo" v-if="logo" class="logo" />
            <i v-else class="iconfont icon-liushuixian-liushuixianx" />
        </template>
    </app-frame>
</template>

<script setup>
import appFrame from "@/components/frame/app-frame.vue";
import { useRouter, useRoute } from "vue-router";
import { computed } from "vue";
import * as _ from "lodash";
import { useSysStore } from "../store";

const router = useRouter();
const sysStore = useSysStore();
const route = useRoute();
const menus = ref([]);
const title = computed(() => {
    let meta = router.currentRoute.value.meta;
    return meta?.title || document.title;
});
const pad = computed(() => {
    return router.currentRoute.value.meta.pad != false;
});
const appCode = computed(() => {
    let path = route.fullPath;
    path = path.match(/\/([^\/]*)/)[1];

    return path;
});
const appInfo = ref({});
const logo = computed(() => {
    return sysStore.getUserConfig().logo;
});
const mainTitle = computed(() => {
    let title = sysStore.getUserConfig().title;
    if (title) {
        document.title = title;
    }

    return document.title;
});

watch(
    appCode,
    () => {
        init();
    },
    {
        immediate: true,
    }
);

watch(logo, () => {
    if (logo.value) {
        document.head.querySelectorAll("link").forEach((link) => {
            if (link.rel === "icon") {
                link.parentNode?.removeChild(link);
            }
        });
        const link = document.createElement("link");
        link.rel = "icon";
        link.href = logo.value;
        document.head.append(link);
    }
});

/**
 * 应用初始化
 */
function init() {
    if (appCode.value == "workbench") {
        menus.value = [
            {
                name: "工作台",
                path: "/workbench",
                icon: "Menu",
                children: [
                    { name: "首页", path: "/workbench/index", icon: "House" },
                    { name: "全部应用", path: "/workbench/apps", icon: "Menu" },
                    { name: "系统公告", path: "/workbench/annoucement", icon: "MessageBox" },
                    { name: "站内信", path: "/workbench/inbox-msg", icon: "Message" },
                    { name: "个人中心", path: "/workbench/user", icon: "User" },
                ],
            },
        ];
    } else {
        app.https.get("/sys/app/find-by-code", { code: appCode.value }).then((resp) => {
            appInfo.value = resp;
            app.https.get("/sys/menu/tree", { appId: resp.id, withHide: false, withButtons: true }).then((resp) => {
                // 解析有权限按钮
                let buttons = [];
                app.utils.loop(resp, (item) => {
                    if (item.path.startsWith("http")) {
                        return;
                    }
                    item.path = `/${appCode.value}/${item.path}`;

                    item.buttons &&
                        item.buttons.forEach((button) => {
                            buttons.push(item.path + ":" + button.code);
                        });
                });
                menus.value = resp;
                sysStore.setButtons(buttons);

                if (route.fullPath == "/" + appInfo.value.code) {
                    let item = resp[0];
                    if (item) {
                        if (item.children?.length) {
                            item = item.children[0];
                        }
                        router.push(item.path);
                    }
                }
            });
        });
    }
}
</script>

<style lang="scss" scoped>
.logo {
    height: 20px;
    max-width: 100%;
}
</style>
